/*
 * icenter page
**/
<template>
<div>
<v-tab></v-tab>
<div class="toplist-topbar">
  <div class="toplist-userinfo">
    <span class="portrait"><img :src="memberInfo && memberInfo.headimgurl"></span>
    <p>{{ memberInfo && memberInfo.nickname || 'userName'}}</p>
  </div>
  <div class="toplist-score">{{ scoreInfo && scoreInfo.data && scoreInfo.data.score }}</div>
  <div class="toplist-num">第**名</div>
</div>
<div class="toplist-friend">
  <div class="hd">这些好友赞过你</div>
  <div class="bd">
    <ul>
      <li v-for="friend in friendData"><img :src="friend"></li>
    </ul>
  </div>
</div>
<div class="page__bd">
  <div class="weui-cells">
    <div class="mod-tit">今日好友积分排行榜</div>
    <div class="weui-cell weui-cell_access rank-items" href="javascript:;" v-for="(item, index) in scoreRankData">
      <div class="weui-cell__bd">
        <img :src="item.headimgurl"><span>{{item.nickname}}</span>
      </div>
      <div class="weui-cell__ft">{{item.score}}</div>
    </div>
  </div>
</div>
</div>
</template>
<script>
import vTab from 'components/common/tab'
export default {
  data () {
    return {
      memberInfo: {},
      scoreInfo: 0,
      friendData: [],
      scoreRankData: {}
    }
  },
  components: {
    'v-tab': vTab
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style scoped>
.toplist-topbar{width:100%; height:1.15rem; background:url(../../assets/imgs/toplist/nav-bg.jpg) no-repeat 50% 50%; background-size:cover;}
.toplist-userinfo{width:.9rem; padding:.15rem 0 0; display:block; margin:0 auto;}
.toplist-userinfo .portrait{width:.55rem; height:.55rem; display:block; margin:0 auto; overflow:hidden; border-radius:50%; background-color:#d9d9d9;}
.toplist-userinfo .portrait img{width:100%; height:100%; display:block; border-radius:50%;}
.toplist-userinfo > p{background-color:#fff; color:#4b4b4b; font-size:.13rem; line-height:.2rem; border-radius:.1rem; width:100%; text-align:center; white-space:nowrap;text-overflow:ellipsis; overflow:hidden; margin:.05rem 0 0;}
.toplist-score,
.toplist-num{position:absolute; top:.4rem; width:.9rem; height:.45rem; padding-top:.1rem; background-color:#ffe156; border:.01rem solid #fff; border-radius:.05rem; text-align:center; line-height:.45rem; font-size:.16rem;}
.toplist-score{left:.2rem;}
.toplist-num{right:.2rem;}
.toplist-score:before,
.toplist-num:before{content:' '; display:block; width:.32rem; height:.32rem; position:absolute; left:50%; top:-.2rem; margin-left:-.16rem; background-repeat:no-repeat; background-size:100% 100%;}
.toplist-score:before{background-image:url(../../assets/imgs/toplist/icon-toplist-score.png);}
.toplist-num:before{background-image:url(../../assets/imgs/toplist/icon-toplist-num.png);}
.toplist-friend{background-color:#fff;}
.toplist-friend .hd{padding:.1rem;}
.toplist-friend .bd{width:100%; overflow:hidden; padding:0 0 .1rem;}
.toplist-friend .bd ul{width:200%; overflow:hidden;}
.toplist-friend .bd ul li{float:left; width:.34rem; padding:0 .07rem;}
.toplist-friend .bd ul li img{width:.34rem; height:.34rem; display:block; border-radius:50%;}
.weui-cells .mod-tit{font-size:.14rem;}
.rank-items .weui-cell__bd img{width:.34rem; height:.34rem; display:inline-block; border-radius:50%; vertical-align:middle;}
.rank-items .weui-cell__bd span{display:inline-block; line-height:.34rem; padding-left:.1rem;}
.rank-items .weui-cell__ft{color:#ffa200;}
</style>
